<template>
	<view class="uni-indexed-list" ref="list" id="list">
		<!-- #ifdef APP-NVUE -->
		<list class="uni-indexed-list__scroll" scrollable="true" show-scrollbar="false">
			<cell v-for="(list, idx) in lists" :key="idx" :ref="'uni-indexed-list-' + idx">
				<!-- #endif -->
				<!-- #ifndef APP-NVUE -->
				<scroll-view :scroll-into-view="scrollViewId" class="uni-indexed-list__scroll" scroll-y>
					
					
					<view v-if="iscity" style="border-bottom:1rpx solid #ccc;  width: 750rpx;box-sizing: border-box; padding: 40rpx 30rpx 0 30rpx ; background-color: #f7f7f7;padding-bottom: 30rpx;">
						<view style="font-size: 30rpx;font-weight: bold;">热门城市</view>
						<view style="margin: 0 auto; width: 690rpx; display: flex;flex-wrap: wrap;align-items: center;">
							<view @click="onclickhot(item.name)" v-for="(item,index) in hotcitys" :key="index" style="margin-top: 30rpx;font-size: 26rpx; padding: 14rpx 30rpx ;box-sizing: border-box;background-color: #fff;border-radius: 10rpx;margin-right: 20rpx;">
								{{item.name}}
							</view>
						</view>
						<view style="margin-top: 30rpx;font-size: 30rpx;font-weight: bold;">请选择</view>
					</view>
					<view v-else id="addressid" style="width: 750rpx;box-sizing: border-box; padding: 40rpx 30rpx 0 30rpx ; background-color: #f7f7f7;padding-bottom: 30rpx;">
						<view style="font-size: 30rpx;font-weight: bold;display: flex;align-items: center;">
							<view @click="choosesheng()" v-if="issheng" style="background-color: #eee;padding: 14rpx 30rpx;box-sizing: border-box;">{{sheng}}</view>
							<view @click="chooseshi()" v-if="isshi" style="background-color: #eee;padding: 14rpx 30rpx;box-sizing: border-box;">{{shi}}</view>
							<view @click="choosequ()" v-if="isqu" style="background-color: #eee; padding: 14rpx 30rpx;box-sizing: border-box;">{{qu}}</view>
            </view>
						<view style="width: 750rpx;height: 1rpx;border-bottom: 1rpx solid #ccc;margin-top: 60rpx;"></view>
						<view style="margin-top: 30rpx;font-size: 30rpx;font-weight: bold;">请选择</view>
					</view>
					
					
					<view v-for="(list, idx) in lists" :key="idx" :id="'uni-indexed-list-' + idx">
						<!-- #endif -->
						<indexed-list-item :list="list" :loaded="loaded" :idx="idx" :showSelect="showSelect"
							@itemClick="onClick"></indexed-list-item>
						<!-- #ifndef APP-NVUE -->
					</view>
					
					
					
				</scroll-view>
				<!-- #endif -->
				<!-- #ifdef APP-NVUE -->
			</cell>
		</list>
		<!-- #endif -->
		<view  class="uni-indexed-list__menu"  @touchmove.stop.prevent="touchMove"
			@touchend="touchEnd" @mousedown.stop="mousedown" @mousemove.stop.prevent="mousemove"
			@mouseleave.stop="mouseleave">
			<view @click="choose(key)" v-for="(list, key) in lists" :key="key" class="uni-indexed-list__menu-item"
				:class="scrollid == key ? 'uni-indexed-list__menu--active' : ''">
				<text class="uni-indexed-list__menu-text"
					:class="scrollid == key ? 'uni-indexed-list__menu-text--active' : ''">{{ list.key }}</text>
			</view>
		</view>
		<view v-if="touchmove" class="uni-indexed-list__alert-wrapper">
			<text class="uni-indexed-list__alert">{{ lists[touchmoveIndex].key }}</text>
		</view>
	</view>
</template>
<script>
	import indexedListItem from './uni-indexed-list-item.vue'
	var app = getApp()
	// #ifdef APP-NVUE
	const dom = weex.requireModule('dom');
	// #endif
	// #ifdef APP-PLUS
	function throttle(func, delay) {
		var prev = Date.now();
		return function() {
			var context = this;
			var args = arguments;
			var now = Date.now();
			if (now - prev >= delay) {
				func.apply(context, args);
				prev = Date.now();
			}
		}
	}

	function touchMove(e) {
		let pageY = e.touches[0].pageY
		let index = Math.floor((pageY - this.winOffsetY) / this.itemHeight)
		if (this.touchmoveIndex === index) {
			return false
		}
		let item = this.lists[index]
		if (item) {
			// #ifndef APP-NVUE
			this.scrollViewId = 'uni-indexed-list-' + index
			this.touchmoveIndex = index
			// #endif
			// #ifdef APP-NVUE
			dom.scrollToElement(this.$refs['uni-indexed-list-' + index][0], {
				animated: false
			})
			this.touchmoveIndex = index
			// #endif
		}
	}
	const throttleTouchMove = throttle(touchMove, 40)
	// #endif

	
	export default {
		name: 'UniIndexedList',
		components: {
			indexedListItem
		},
		emits: ['click'],
		props: {
			options: {
				type: Array,
				default () {
					return []
				}
			},
			address:{
				type:Array
			},
			showSelect: {
				type: Boolean,
				default: false
			}
		},
		data() {
			return {
				hotcitys:[],
				lists: [],
				winHeight: 0,
				itemHeight: 0,
				winOffsetY: 0,
				touchmove: false,
				touchmoveIndex: -1,
				scrollViewId: '',
				touchmovable: true,
				loaded: false,
				isPC: false,
				scrollid:'',
				iscity:true,
				city2arr:[],
				shiarr:[],
				xianarr:[],
				sheng:'',
				shi:'',
				qu:'',
				hotcity:'',
				issheng:false,
				isshi:false,
				isqu:false
			}
		},
		watch: {
			options: {
				handler: function() {
					this.setList()
				},
				deep: true
			}
		},
		mounted() {
			this.hotcitys =uni.getStorageSync('cityobj').hotCity
			// #ifdef H5
			this.isPC = this.IsPC()
			// #endif
			setTimeout(() => {
				this.setList()
			}, 50)
			setTimeout(() => {
				this.loaded = true
			}, 300);
		},
		methods: {
			choosesheng(){
				this.iscity = true
				this.issheng = false
				this.isshi =false
				this.isqu = false
				this.setList()
			},
			chooseshi(){
				this.isshi = false
				this.isqu = false
				this.shaixuan()
			},
			choosequ(){
				this.isshi = true
				this.isqu =false
				this.shaixuanxian()
			},
			onClick(e) {
				let {
					idx,
					index
				} = e
				let obj = {}
				for (let key in this.lists[idx].items[index]) {
					obj[key] = this.lists[idx].items[index][key]
				}
				let select = []
				if (this.showSelect) {
					this.lists[idx].items[index].checked = !this.lists[idx].items[index].checked
					this.lists.forEach((value, idx) => {
						value.items.forEach((item, index) => {
							if (item.checked) {
								let obj = {}
								for (let key in this.lists[idx].items[index]) {
									obj[key] = this.lists[idx].items[index][key]
								}
								select.push(obj)
							}
						})
					})
				}
				this.iscity = false
				
				if(!this.issheng){
					
					this.sheng = obj.name
					this.shaixuan()
				}
				if(this.issheng&&!this.isshi){
					
					console.log('this.isshi',this.isshi);
					this.shi = obj.name
					this.shaixuanxian()
				}
				if(this.isshi){
					
					this.qu = obj.name
					this.shaixuanxian2()
					
				}
				
				
				this.scrollViewId = 'addressid'
				this.$emit('click', {
					item: obj,
					select: select
				})
			},
			// onclick2(e){
			// 	this.iscity = false
			// 	this.shi = e
			// 	this.qu = ''
			// 	// this.shaixuanxian()
			// 	this.scrollViewId = 'addressid'
			// },
			onclickhot(item){
				this.hotcity = item
				this.iscity = false
				this.shaixuanhot()
			},
			//热门城市
			shaixuanhot(){
				var that = this
				for(var i =0;i<that.address.length; i++){
					for(var j =0;j<that.address[i].city.length; j++){
						for(var k=0;k<that.address[i].city[j].children.length;k++){
							for(var l=0;l<that.address[i].city[j].children[k].city.length;l++){
								if(that.hotcity==that.address[i].city[j].children[k].city[l].name){
									that.shiarr =  that.address[i].city[j].children
									that.xianarr =  that.address[i].city[j].children[k].city[l].children
									that.sheng = that.address[i].city[j].name
									that.shi = that.address[i].city[j].children[k].city[l].name
									that.issheng = true
									that.isshi = true
									
									that.typeshegnshiqu(that.shiarr)
									that.shaixuanxian()
									
								}
							}
						}
					
					}
				}
			},
			//筛选市
			shaixuan(){
				var that = this
				for(var i =0;i<that.address.length; i++){
					for(var j =0;j<that.address[i].city.length; j++){
						if(that.sheng == that.address[i].city[j].name){
							console.log('查询结果' ,that.address[i].city[j]);
							that.shiarr =  that.address[i].city[j].children
							console.log('查询结果后代城市', that.address[i].city[j].children);
							that.typeshegnshiqu(that.shiarr)
							that.issheng = true

						}
					}
				}
			},
			//筛选县区
			shaixuanxian(){
				var that = this
				for(var i =0;i<that.shiarr.length; i++){
					for(var j =0;j<that.shiarr[i].city.length; j++){
						
						if(that.shi == that.shiarr[i].city[j].name){
							console.log('查询结果' ,that.shiarr[i].city[j]);
							that.xianarr =  that.shiarr[i].city[j].children
							console.log('查询结果后代城市', that.shiarr[i].city[j].children);
							that.typeshegnshiqu(that.xianarr)
			        that.isshi = true
						}
						
							
					}
				}
			},
			//筛选最后点击县区
			shaixuanxian2(){
				var that = this
				for(var i =0;i<that.xianarr.length; i++){
					for(var j =0;j<that.xianarr[i].city.length; j++){
						
						if(that.qu == that.xianarr[i].city[j].name){
							console.log('查询结果' ,that.xianarr[i].city[j]);
							that.xianstring = that.xianarr[i].city[j]
							that.closepopup()
						}
					}
				}
			},
			//筛选子级城市
			typeshegnshiqu(e){
				var arr = []
				for(var i =0;i<e.length; i++){
					var data = []
					for(var j =0;j<e[i].city.length; j++){
						data.push(e[i].city[j].name)
					}
					arr.push({
						"letter": e[i].startLetter,
						"data":data
					})
				}
				console.log('arr',arr);
				
				this.setLists(arr)
				
				
			},
			//选择县区关闭弹窗
			closepopup(){
				this.isqu = true
				var a = `${this.sheng},${this.shi},${this.qu}`
				var xianstring = this.xianstring
				var data ={
					id:xianstring.cityId,
					cityName:a
				}
				this.$emit('actIdfun',data)
			},
			setList() {
				let index = 0;
				this.lists = []
				this.options.forEach((value, index) => {
					if (value.data.length === 0) {
						return
					}
					let indexBefore = index
					let items = value.data.map(item => {
						let obj = {}
						obj['key'] = value.letter
						obj['name'] = item
						obj['itemIndex'] = index
						index++
						obj.checked = item.checked ? item.checked : false
						return obj
					})
					this.lists.push({
						title: value.letter,
						key: value.letter,
						items: items,
						itemIndex: indexBefore
					})
				})
				// #ifndef APP-NVUE
				uni.createSelectorQuery()
					.in(this)
					.select('#list')
					.boundingClientRect()
					.exec(ret => {
						this.winOffsetY = ret[0].top
						this.winHeight = ret[0].height
						this.itemHeight = this.winHeight / this.lists.length
					})
				// #endif
				// #ifdef APP-NVUE
				dom.getComponentRect(this.$refs['list'], (res) => {
					this.winOffsetY = res.size.top
					this.winHeight = res.size.height
					this.itemHeight = this.winHeight / this.lists.length
				})
				// #endif
			},
			setLists(e) {
				let index = 0;
				this.lists = []
				e.forEach((value, index) => {
					if (value.data.length === 0) {
						return
					}
					let indexBefore = index
					let items = value.data.map(item => {
						let obj = {}
						obj['key'] = value.letter
						obj['name'] = item
						obj['itemIndex'] = index
						index++
						obj.checked = item.checked ? item.checked : false
						return obj
					})
					this.iscity = false
					this.lists.push({
						title: value.letter,
						key: value.letter,
						items: items,
						itemIndex: indexBefore
					})
				})
				// #ifndef APP-NVUE
				uni.createSelectorQuery()
					.in(this)
					.select('#list')
					.boundingClientRect()
					.exec(ret => {
						this.winOffsetY = ret[0].top
						this.winHeight = ret[0].height
						this.itemHeight = this.winHeight / this.lists.length
					})
				// #endif
				// #ifdef APP-NVUE
				dom.getComponentRect(this.$refs['list'], (res) => {
					this.winOffsetY = res.size.top
					this.winHeight = res.size.height
					this.itemHeight = this.winHeight / this.lists.length
				})
				// #endif
			},
			choose(e) {
				console.log(1111);
				this.scrollid = e
				this.scrollViewId = 'uni-indexed-list-' + e
			},
			touchMove(e) {
				// #ifndef APP-PLUS
				let pageY = this.isPC ? e.pageY : e.touches[0].pageY
				let index = Math.floor((pageY - this.winOffsetY) / this.itemHeight)
				if (this.touchmoveIndex === index) {
					return false
				}
				let item = this.lists[index]
				if (item) {
					this.scrollViewId = 'uni-indexed-list-' + index
					this.touchmoveIndex = index
				}
				// #endif
				// #ifdef APP-PLUS
				throttleTouchMove.call(this, e)
				// #endif
			},
			touchEnd() {
				this.touchmove = false
				// this.touchmoveIndex = -1
			},

			/**
			 * 兼容 PC @tian
			 */

			mousedown(e) {
				if (!this.isPC) return
				this.touchStart(e)
			},
			mousemove(e) {
				if (!this.isPC) return
				this.touchMove(e)
			},
			mouseleave(e) {
				if (!this.isPC) return
				this.touchEnd(e)
			},

			// #ifdef H5
			IsPC() {
				var userAgentInfo = navigator.userAgent;
				var Agents = ["Android", "iPhone", "SymbianOS", "Windows Phone", "iPad", "iPod"];
				var flag = true;
				for (let v = 0; v < Agents.length - 1; v++) {
					if (userAgentInfo.indexOf(Agents[v]) > 0) {
						flag = false;
						break;
					}
				}
				return flag;
			},
			// #endif


			
		}
	}
</script>
<style lang="scss" scoped>
	.uni-indexed-list {
		position: absolute;
		left: 0;
		top: 0;
		right: 0;
		bottom: 0;
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: row;
	}

	.uni-indexed-list__scroll {
		flex: 1;
	}

	.uni-indexed-list__menu {
		position: fixed;
		top:260rpx;
		right: 0;
		z-index: 999;
		height: 900rpx;
		background-color: #fff;
		width: 50rpx;
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: column;
	}

	.uni-indexed-list__menu-item {
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex: 1;
		align-items: center;
		justify-content: center;
		/* #ifdef H5 */
		cursor: pointer;
		/* #endif */
	}

	.uni-indexed-list__menu-text {
		font-size: 12px;
		text-align: center;
		color: #aaa;
	}

	.uni-indexed-list__menu--active {
		// background-color: rgb(200, 200, 200);
	}

	.uni-indexed-list__menu--active {}

	.uni-indexed-list__menu-text--active {
		border-radius: 16px;
		width: 16px;
		height: 16px;
		line-height: 16px;
		background-color: #007aff;
		color: #fff;
	}

	.uni-indexed-list__alert-wrapper {
		position: absolute;
		left: 0;
		top: 0;
		right: 0;
		bottom: 0;
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: row;
		align-items: center;
		justify-content: center;
	}

	.uni-indexed-list__alert {
		width: 80px;
		height: 80px;
		border-radius: 80px;
		text-align: center;
		line-height: 80px;
		font-size: 35px;
		color: #fff;
		background-color: rgba(0, 0, 0, 0.5);
	}
</style>
